$(function() {
    var layer= layui.layer;

    var form = layui.form;
   
    initCate() //1.5
    
    //2 初始化富文本编辑器
initEditor()
    //1 定义加载文章分类的方法
    function initCate() {
        $.ajax({
            method: 'GET',
            url:'/my/article/cates',
            success:function(res){
                if(res.status !== 0){
                    return layer.msg('初始化文章分类失败!');
                }
                //1.2调用模板引擎， 渲染分类的下拉菜单
                var htmlStr = template('tpl-cate',res);
                //1.3将htmlStr渲染到seclect里的cate_id
                $('[name=cate_id]').html(htmlStr);
                //1.4 因为是动态添加的可选项 为了让layui监听到 调用form.render
                form.render();
            }
        })
    }

// 3初始化裁剪区
      // 3.1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 3.2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3.3. 初始化裁剪区域
  $image.cropper(options)


//   4.模拟选择封面按钮打开文件选择框（隐藏）
$('#btnChooseImage').on('click',function () {
    $('#coverFile').click();
    
})


// 5.将选择的图片设置到裁剪区域中
// 5.1监听coverFile的change事件 获取用户选择的文件列表
$('#coverFile').on('change',function (e) {
//5.2 获取文件的列表数组
var files= e.target.files;
// 5.3判断用户是否选择了选件
if(files.length === 0){
    return;
}
// 5.4根据文件创建对应的URL地址
var newImgURL = URL.createObjectURL(files[0]);
// 5.6创建新的裁剪区域
$image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})


// 6.文章发布的实现
var art_state = '已发布';
// 6.1定义文章的状态 根据点击行为 发布、草稿
$('#btnSave2').on('click', function(){
    art_state ='草稿'
})


//7 监听表单的submit事件拿到这些数据 基于表单创建formData 将title cate_id content和state 都存到FormData中
// 7.1为表单绑定submit事件
$('#form-pub').on('submit', function(e){
    // 7.2阻止默认提交行为
    e.preventDefault();

// 7.3基于form表单 快速创建一个FormData对象
var fd = new FormData($(this)[0]);//jquery对象通过[0]转化为原生的dom对象

// 7.4追加发布状态 存到fd
fd.append('state', art_state);


// fd.forEach(function(v,k){
//     console.log(k,v);//获取到了title  cate_id  content state
  
// })
// 7.5将裁剪过后的图片 输为一个文件对象
$image
  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
// 7.6将文件对象 调用fd.append 追加到forData中
fd.append('cover_img',blob);

// 8.2发起ajax请求 实现发表文章
publishArticle(fd);

  })


    })

    //  8 .1定义发布文章的方法
function publishArticle(fd) {
    $.ajax({
        method: 'POST',
        url:'/my/article/add',
        data: fd,
// 8.3注意向服务器提交的是formData格式的数据，必须添加contentType和processData配置项
contentType: false,
processData: false,


success:function(res){
    if(res.status !==0){
return layer.msg('发布文章失败!')
    }
    layer.msg('发布文章成功!');
    // 8.4发布文章成功后，跳转到文章列表页面
    location.href ='../article/art_list.html'
}







    })
}
})

